<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>[% title %]</title>
	<meta name="generator" content="[% generator.name %]">
	<meta name="viewport" content="width=device-width">
	<!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,greek,latin-ext' rel='stylesheet' type='text/css'> -->
	<![if !IE]>
	<!-- comment out for IE since it spams the user with warnings -->
	<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
	<script type='text/javascript'>
		$(window).load(function(){$("#navigation").height( $("#content").height()+65 );});
	</script>
	<![endif]>
	<style>
		body, html {
			height:100%;
			font-family:'Open Sans', sans-serif;
			line-height:1.5em;
			font-weight:300;
			background-color:#FAFAFA;
			text-rendering:geometricPrecision;
			margin:0;
			padding:0;
		}
		.wrapper {
			height:100%;
			position:relative;
		}
		#navigation {
			background-color:#F3F3F3;
			display:inline-block;
			border-right:1px solid #EAEAEA;
			padding-right:65px;
			padding-top:65px;
			padding-left:25px;
			position:relative;
			float:left;
			min-height:100%;
		}
		#content {
			float:left;
			display:inline-block;
			position:absolute;
			max-width:960px;
			padding:65px;
		}
		#navigation ul {
			margin-top:0;
			margin-bottom:0;
			padding-left:40px;
		}
		#navigation li {
			list-style-type:none;
		}
		#navigation a {
			text-decoration:none;
			color:gray;
		}
		#navigation strong {
			color:#4E9A06;
			font-weight:400;
		}
		#navigation a:hover {
			text-decoration:underline;
		}
		#content h1:nth-child(1) {
			margin-top:0;
		}
		h1,h2,h3,h4,h5,h6 {
			color:#4E9A06;
			font-weight:300;
			margin-bottom: 0;
		}
		p {
			margin-top: 0;
		}
		#content a {
			color:#CE5C00;
		}
		#content a {
			text-decoration: none;
		}
		#content a:hover {
			text-decoration: underline;
		}
		#content a:active {
			text-decoration: underline;
		}
		#content strike {
			color: grey;
		}
		#content u {
			text-decoration: none;
			background-color: yellow;
		}
		#content tt {
			color: #2e3436;
		}
		#content pre {
			color: #2e3436;
			margin-left: 20px;
		}
		.backlinks {
			color:gray;
		}
		hr.footnotes {
			width: 20%;
			margin-left: 0;
		}
		@media print{
			#navigation{
				background-color:#FFF;
			}
		}

		span.zim-tag {
			color: #ce5c00;
		}
		div.zim-object {
			border-style:solid;
			border-width:1px;
		}

		.checked-box {list-style-image: url()}
		.xchecked-box {list-style-image: url()}
		.unchecked-box {list-style-image: url()}
		.migrated-box {list-style-image: url()}
		ul {list-style-image: none}
		/* ul rule needed to reset style for sub-bullets */

	</style>
</head>

[% options.empty_lines = "default" %]

<body>
	<div class="wrapper">
		<div id="navigation"> [% index() %] </div>
		<div id="content">
		<!--[% FOR page IN pages %]-->
			<h1>[% page.title %] <a name='[% anchor(page) %]'></a></h1>

			[% page.body %]

			<br>
			<span class="backlinks">
			<!--[% FOR link IN page.backlinks %]-->
				[% IF loop.first %]
				<hr class='footnotes'>
				<b>Backlinks:</b>
				[% END %]
				<a href='[% uri(link) %]'>[% link.name %]</a>
				[% IF loop.last %]<br /><br />[% END %]
			<!--[% END %]-->
			</span>

			[% IF not loop.last %]<hr class='pageseparator'/>[% END %]
		<!--[% END %]-->
		</div>
	</div>
</body>
</html>

